﻿var microsoft = microsoft || {};
microsoft.coral = microsoft.coral || {};
microsoft.coral.frontend = microsoft.coral.frontend || {};
microsoft.coral.frontend.ui = microsoft.coral.frontend.ui || {};

(function () { 
    microsoft.coral.frontend.ui.scrollbar = microsoft.coral.frontend.ui.scrollbar || {};
    
    microsoft.coral.frontend.ui.scrollbar.addTo = function(target)
    {
        var container = target.parent(),
            contentTop = target.offset().top,
            contentHeight = target.outerHeight(),
            contentWidth = target.outerWidth(),
            containerHeight = container.height(),
            containerWidth = container.width();

        if (contentHeight <= containerHeight) return;

        var scrollbar = $('<div class="Scrollbar">' +
                                '<div class="Up"></div>' + 
                                '<div class="Track">' +
                                    '<div class="Handle"></div>' +
                                '</div>' + 
                                '<div class="Down"></div>' + 
                            '</div>');
        container.css("overflow","hidden").append(scrollbar);
        scrollbar.css({top:target.position().top,
                        left:target.position().left + containerWidth - scrollbar.outerWidth(),
                        height: containerHeight
                        });
        
        var upButton = $(".Up",scrollbar),
            downButton = $(".Down",scrollbar),
            track = $(".Track",scrollbar),
            handle = $(".Handle",scrollbar),
            ratio = containerHeight / contentHeight,
            distance = 5;
            
        
        track.css({height:scrollbar.height() - upButton.outerHeight() - downButton.outerHeight()});
        handle.css({
                    top: 0,
                    left: 0,
                    height: Math.round(track.height() * ratio)
                   });

        var minTop = handle.offset().top ,maxTop = minTop + track.height() - handle.outerHeight();

        var scroll = function(delta)
        {
            target.css("position","relative").offset({top: target.offset().top - Math.round(delta / ratio)});
        }

        var scrollToTopMost = function()
        {
            target.css({position:"relative",top:"0px"});
        }
        var scrollToBottomMost = function()
        {
            target.css({position:"relative",top:(containerHeight - contentHeight) + "px"});
        }

        upButton.click(function(){
            var beginTop = handle.offset().top;
            if (beginTop > minTop)
            {   
                var top  = beginTop - distance;
                if (top <= minTop)
                {
                    handle.offset({top: minTop});
                    scrollToTopMost();
                }
                else
                {
                    handle.offset({top: top});
                    scroll(handle.offset().top - beginTop);
                }
            }
        });

        downButton.click(function(){
            var beginTop = handle.offset().top;
            if (beginTop < maxTop)
            {
                var top = beginTop + distance;
                if (top >= maxTop)
                {
                    handle.offset({top: maxTop}); 
                    scrollToBottomMost();
                }
                else
                {
                    handle.offset({top: top});  
                    scroll(handle.offset().top - beginTop); 
                }
            }
        });

        var draging = false;  
        var startLeft,startTop;  
        var startX,startY;  
            
        handle.mousedown(function(event){  
            var offset = $(this).offset();  
            startLeft = offset.left;  
            startTop = offset.top;  
            startX = event.clientX;  
            startY = event.clientY;  
            draging = true;  
        });
        $(document).mousemove(function(event){  
            if (draging == false) return;  
            var deltaY = event.clientY - startY;
            var top = startTop + deltaY;
            var distance = top - handle.offset().top; 
            if (top > minTop && top < maxTop) 
            { 
                handle.offset({top:top});  
                scroll(distance);
            }
        }).mouseup(function(event){ draging = false; });  
    }
})(microsoft.coral.frontend.ui)
   